<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>弧长计算器</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <![endif]-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="example" class="container">
    <h4 align="center">弧长计算器</h4>
    <form>
        <div class="form-group">
            <label for="radius">半径</label>
            <input type="number" class="form-control input-lg" id="radius" v-model="radius" placeholder="R">
        </div>
        <div class="form-group">
            <label for="width">宽度</label>
            <input type="number" class="form-control input-lg" id="width" v-model="width" placeholder="宽度">
        </div>
        <div class="form-group">
            <label for="thick">板材厚度</label>
            <input type="number" class="form-control input-lg" id="thick" v-model="thick" placeholder="板材厚度">
        </div>
    </form>
    <h4>计算结果：</h4>
    <div class="row">
        <div class="col-lg-12 col-sm-12" style="font-size: 2.5em;">
            {{result}}
        </div>
    </div>
</div>


<script>
    new Vue({
        el: '#example',
        data: {
            radius: '',
            width: '',
            thick: ''
        },
        computed: {
            result: function () {
                if (this.radius && this.radius !== 0 && this.width && this.width !== 0){
                    let value = 2 * this.radius * Math.asin(this.width/(2*this.radius));
                    if (this.thick && this.thick !== 0) {
                        value = value + Number(this.thick);
                    }
                    return value;
                } else {
                    return 0;
                }

            }
        }
    })
</script>
</body>
</html>